Welcome to RoadDust's JavaScript tutorial. Here you will learn JavaScript fast and will master basic JavaScript code in no time

Create a web page with JavaScript.

Code a basic JavaScript script that displays "Hello World".

If you wish to learn JavaScript basics, you are more than likely familiar with HTML syntax. If you are not familiar with HTML or don't know what it is, you must first learn HTML basics. Once you know your HTML basics, you are ready for this JavaScript basic tutorial. The following example JavaScript code is the JavaScript hello world code. As tradition would have it, your first JavaScript should display "Hello World". Here is the example of a web page with JavaScript.

In the above example, the JavaScript code was put between script tags in the head portion of the HTML. However, JavaScript code can be inserted anywhere as long as it is between script tags and somewhere between either the head tags or the body tags.

When searching for JavaScript syntax you will often find the JavaScript code between HTML comment delimiters. Many people choose to comment out the JavaScript code so that it will not be read as HTML. The following web page with JavaScript illustrates what I mean.

You may use these comment delimiters as I am sure it is good practice when coding in JavaScript but personally I have never seen the difference.

What is JavaScript code used for?

Miscellaneous uses for a javascript script.

As previously stated, JavaScript code can be inserted in the head or body of a web page. Most of the time a web page with JavaScript will store its code in the head portion as functions. The JavaScript functions will then be called upon by HTML buttons or JavaScript stored in the body of the web page. The following web page with JavaScript is a good example of this.

The example above is an empty web page with one button labeled "CLICK". When you press on the button the JavaScript function called "functionName" is triggered and a message box appears saying "Hey you!". This is a great example of how JavaScript functions are called.

JavaScript basic tutorial of syntax.

Basic JavaScript syntax for declaring variables and mathematical equations.

Now that we have seen how to make a web page with JavaScript and the different ways of storing the JavaScript code, I feel confident that I can omit some of the HTML tags in the examples to come.

In JavaScript syntax variables do not need to be declared before they are used. The reason for this is that in JavaScript syntax a variable's type is defined by the value it contains and the context it is used in. Even though this is true, there is still a way to initialize variables in JavaScript syntax. However variables are always declared without a type. The two following JavaScript examples do the exact same thing.

OR

The two JavaScript code examples above are identical except for the "var" syntax. The "var" syntax is used to declare that what follows is the name of a new JavaScript variable. Though it is not required in JavaScript, some people use it as part of their coding standard and would tell you that it is good practice. Now that we got that out of the way, allow me to show you a more practical use for JavaScript. The following web page with JavaScript takes the contents of textBox1, multiplies it to the contents of textBox2 and displays it in textBox3. The same principal can be used for subtractions, division etc... However, it will not work properly with additions and will will tell you why right after.

When looking at the code above do not get confused by the mathematical symbols used between the body tags. Those symbols are there for display purpose only and do not affect the code at all. All references I make to the code and the mathematical equations refer to the code between the SCRIPT tags. In the web page with JavaScript syntax example above, you could replace the "*" which means multiplication by a slash "/" which means division if you want to have a division JavaScript function. You could then add a button labeled "DIVIDE" which would call your division function in the same way. The same applies if you intend on making a subtraction using the "-" symbol. So why can't you use a "+" sign in JavaScript with the same result? The answer to this question is simple. It is simply because the variable declaration in JavaScript is done without a type. With all of the other mathematical equations JavaScript sees the variables as integers (numbers) because you cannot use "*", "/" and "-" with non-numeric variables. However, the "+" sign can be used with strings (series of characters). In this example I used my input from text boxes. By default, JavaScipt will take the content of a text box as text unless it has reason to believe it should be other. It is for that reason that with the above code, using a "+" sign in the equation would not have the desired effect... Go ahead and try it, with this logic JavaScript will calculate "1 + 1 = 11". JavaScript simply puts both strings together to make a larger one. In the same way you could say "Java + Script = JavaScript". In the next section I will tell you how to take control of the way JavaScript interprets your variables.

JavaScript basic tutorial of variable types.

JavaScript syntax for specifying variable types.

In the above JavaScript code example, I showed you how to make basic mathematical equations using text boxes as input. Unfortunately as you saw, it did not work for the addition because of the way JavaScript interprets variables. I will now demonstrate the proper JavaScript syntax to TELL JavaScript how to interpret the variable types. In the following example you will see the same code but updated to make the addition possible.

In the above JavaScript code example I put "textBox1.value" inside JavaScript's parseFloat function. This function tells JavaScript that whatever is inside the round brackets has to be converted into a decimal number. So you can now use the code to add decimal numbers together. You could have also used JavaScript's parseInt function which would convert the content into a non-decimal number. Be careful however when using parseInt because it does not round up numbers, it simply ignores anything after the decimal point. For example "1.9 + 1.9 = 2", As you can see this is very mathematically incorrect and should be kept in mind when using the parseInt function. If you want to convert a number variable into a string you can use the toString property. Here is an example of this just for fun.

The above JavaScript code example is completely ridiculous but I thought it might help you understand. Basically, by using this code you would be back to our initial problem where "1 + 1 = 11" because the above code says take the value from the textbox (which is a string of text), convert it to a float (which is a decimal number), then take all that and flip it back to a string using the toString method. So why would you want to do this? the answer is you wouldn't. I just wanted to show you how these things work.

Learn JavaScript basics with JavaScript code.

So far we have seen the following JavaScript code syntax.

This wraps up the first and most basic part of this JavaScript tutorial. I hope you are not too confused about the topics we have covered.

Making a web page with JavaScript: JavaScript code must be inserted between SCRIPT tags inside a web page between either the HEAD tags or the BODY tags.

Creating and calling JavaScript functions: JavaScript functions can be called with the use of HTML buttons and use input from text boxes as shown above in multiple examples of web pages with JavaScript.

JavaScript variable declaration: JavaScript variables do not need to be declared before being used and their type is defined by the way they are used.

JavaScript variable type conversion: For mathematical purposes functions and methods can be used to convert a variable from one type to another using the following syntax.

If you feel confident in these different aspects of JavaScript then you are ready for the next part of the tutorial. If you are lost and confused I suggest going over this again while trying the examples and playing with the code until you understand.

Learn more JavaScript syntax...

Writing HTML using JavaScript.

It is possible to write HTML with JavaScript. This is useful to have extra HTML added in case you need extra buttons or any other HTML elements added depending on certain conditions. This can be done before and after the webpage is loaded. Find out all you need to know by following the link above.